<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .blue {
            color: blue;
        }
        
        .red {
            color: red;
        }
    </style>
</head>

<body>

    <p>
        什么是查询字符串
        <br> 'http://www.liulongbin.top:3006/api/getbooks'
        <br>'http://www.liulongbin.top:3006/api/getbooks?id=1'
        <br>'http://www.liulongbin.top:3006/api/getbooks?id=1&name=西游记'
        <br>这就是get携带参数的本质
    </p>
    <p>
        url编码 url中只允许使用英文字母、数字
        <br>url编码就是使用英文字符去表示非英文字符
        <br>'http://www.liulongbin.top:3006/api/getbooks?id=1&name=<span class="blue">西</span>
        <sapn class="red">游</sapn>
        <span class="">记</span>'
        <br>编码后如下
        <br>'http://www.liulongbin.top:3006/api/getbooks?id=1&name=<span class="blue">%E8%A5%BF</span>
        <sapn class="red">%E6%B8%B8</sapn>
        <span class="">%E8%AE%B0</span>'
    </p>
    <p>
        编解码函数
        <br>encodeURI()
        <br>decodeURI()


    </p>
    <script>
        // url编码
        var str = '西游记';
        var str1 = encodeURI(str);
        console.log(str1);
        // url解码
        var str2 = decodeURI(str1);
        console.log(str2);
    </script>
</body>

</html>